<template>
  <div class="chat-sidebar">
    <!-- 新建对话按钮 -->
    <div class="sidebar-header">
      <a-button type="primary" block @click="$emit('new')" :icon="h(PlusOutlined)">
        新建对话
      </a-button>
    </div>

    <!-- 会话列表 -->
    <div class="sessions-list">
      <a-spin :spinning="loading" tip="加载中...">
        <a-menu
          v-if="sessions.length > 0"
          v-model:selectedKeys="selectedKeys"
          mode="inline"
          @click="handleSelect"
        >
          <a-menu-item
            v-for="session in sessions"
            :key="session.session_id"
            class="session-item"
          >
            <template #icon>
              <message-outlined />
            </template>
            <div class="session-content">
              <div class="session-title">{{ session.title }}</div>
              <div class="session-meta">
                <span>{{ session.message_count }} 条消息</span>
                <span>{{ formatTime(session.updated_at) }}</span>
              </div>
            </div>
            <template #extra>
              <a-button
                type="text"
                size="small"
                danger
                @click.stop="handleDelete(session.session_id)"
                :icon="h(DeleteOutlined)"
              />
            </template>
          </a-menu-item>
        </a-menu>
        
        <a-empty v-else description="暂无对话" style="margin-top: 50px;">
          <a-button type="primary" @click="$emit('new')">开始新对话</a-button>
        </a-empty>
      </a-spin>
    </div>
  </div>
</template>

<script setup>
import { h, computed, ref, watch } from 'vue'
import { MessageOutlined, PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import { Modal } from 'ant-design-vue'

const props = defineProps({
  sessions: {
    type: Array,
    default: () => []
  },
  currentSessionId: {
    type: String,
    default: null
  },
  loading: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['select', 'new', 'delete'])

const selectedKeys = ref([])

// 监听当前会话ID变化
watch(() => props.currentSessionId, (newId) => {
  if (newId) {
    selectedKeys.value = [newId]
  } else {
    selectedKeys.value = []
  }
}, { immediate: true })

// 选择会话
const handleSelect = ({ key }) => {
  emit('select', key)
}

// 删除会话
const handleDelete = (sessionId) => {
  Modal.confirm({
    title: '确认删除',
    content: '确定要删除这个对话吗？此操作不可恢复。',
    okText: '确定',
    okType: 'danger',
    cancelText: '取消',
    onOk() {
      emit('delete', sessionId)
    }
  })
}

// 格式化时间
const formatTime = (timestamp) => {
  if (!timestamp) return ''
  
  const date = new Date(timestamp)
  const now = new Date()
  const diff = now - date
  
  // 小于1分钟
  if (diff < 60000) {
    return '刚刚'
  }
  
  // 小于1小时
  if (diff < 3600000) {
    return `${Math.floor(diff / 60000)}分钟前`
  }
  
  // 小于1天
  if (diff < 86400000) {
    return `${Math.floor(diff / 3600000)}小时前`
  }
  
  // 小于7天
  if (diff < 604800000) {
    return `${Math.floor(diff / 86400000)}天前`
  }
  
  // 显示日期
  return date.toLocaleDateString()
}
</script>

<style scoped>
.chat-sidebar {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 100px);
}

.sidebar-header {
  padding: 18px;
  border-bottom: 1px solid #e8e8e8;
}

.sessions-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0;
}

:deep(.ant-menu) {
  border: none;
  background: transparent;
}

:deep(.session-item) {
  height: auto !important;
  line-height: 1.5 !important;
  padding: 14px 16px !important;
  margin: 4px 12px !important;
  border-radius: 8px !important;
  transition: all 0.2s ease;
}

:deep(.session-item:hover) {
  background: #f7f9fc !important;
}

:deep(.ant-menu-item-selected) {
  background: #e8f4fd !important;
}

.session-content {
  flex: 1;
  min-width: 0;
}

.session-title {
  font-size: 14px;
  font-weight: 500;
  color: #2c3e50;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 6px;
}

.session-meta {
  font-size: 12px;
  color: #8a8f99;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

/* 滚动条样式 */
.sessions-list::-webkit-scrollbar {
  width: 5px;
}

.sessions-list::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 3px;
}

.sessions-list::-webkit-scrollbar-thumb:hover {
  background: #bfbfbf;
}

.sessions-list::-webkit-scrollbar-track {
  background: transparent;
}
</style>

